import React, { useState } from 'react';
import { useEffect } from 'react';
import styles from './index.module.css';

const JsonFormatter = () => {
  const [inputJson, setInputJson] = useState('');
  const [formattedJson, setFormattedJson] = useState('');
  const [error, setError] = useState('');

  const formatJson = () => {
    try {
      setError('');
      if (!inputJson.trim()) {
        setFormattedJson('');
        return;
      }
      const parsed = JSON.parse(inputJson);
      const formatted = JSON.stringify(parsed, null, 2);
      setFormattedJson(formatted);
    } catch (err) {
      setError(`JSON格式错误: ${err.message}`);
      setFormattedJson('');
    }
  };

  const clearInput = () => {
    setInputJson('');
    setFormattedJson('');
    setError('');
  };

  const compressJson = () => {
    try {
      setError('');
      if (!inputJson.trim()) {
        setFormattedJson('');
        return;
      }
      const parsed = JSON.parse(inputJson);
      const compressed = JSON.stringify(parsed);
      setFormattedJson(compressed);
    } catch (err) {
      setError(`JSON格式错误: ${err.message}`);
      setFormattedJson('');
    }
  };

  const copyToClipboard = () => {
    if (formattedJson) {
      navigator.clipboard.writeText(formattedJson);
      alert('格式化后的JSON已复制到剪贴板');
    }
  };

  useEffect(() => {
      // 设置页面标题
      document.title = "JSON格式化工具 - 工具集";

      // 设置描述元标签
      const descriptionMeta = document.querySelector('meta[name="description"]');
      if (descriptionMeta) {
        descriptionMeta.content = "免费在线JSON格式化工具，帮助您快速格式化、验证和压缩JSON数据，提升开发效率。";
      } else {
        const meta = document.createElement('meta');
        meta.name = "description";
        meta.content = "免费在线JSON格式化工具，帮助您快速格式化、验证和压缩JSON数据，提升开发效率。";
        document.head.appendChild(meta);
      }
    }, []);

    return (
        <div className={styles.container}>
        <div className={styles.panel}>
        <h3 className={styles.title}>输入 JSON</h3>
        <textarea
          className={styles.textarea}
          value={inputJson}
          onChange={(e) => setInputJson(e.target.value)}
          placeholder="请输入JSON字符串"
          rows={15}
        ></textarea>
        <div className={styles.buttonGroup}>
          <button className={styles.button} onClick={formatJson}>格式化</button>
          <button className={styles.button} onClick={compressJson}>压缩</button>
          <button className={styles.button} onClick={clearInput}>清空</button>
        </div>
        {error && <div className={styles.error}>{error}</div>}
      </div>
      <div className={styles.panel}>
        <h3 className={styles.title}>输出结果</h3>
        <div className={styles.textarea} style={{ whiteSpace: 'pre-wrap', minHeight: '300px' }}>{formattedJson}</div>
      </div>
    </div>
  );
};

export default JsonFormatter;